<!DOCTYPE html>
<!--

      
           _____                       _____            ____                          
         /     (                      /     )    _     /    )             
        /_____                       / ____/   (_/    /    / 
             / __ __ ____ .__ __    /     )   (_\_/  /    / 
      /_____/ (_// // / /// /(_/  _/     (_      )  /____/                          
                                                        
                             Research & Development 2014


-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Form template</title>
	<!-- Fonts -->
	<link href='css.css' rel='stylesheet' type='text/css'>
    <!-- Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet">
    <!-- jQuery UI -->
    <link rel="stylesheet" href="jquery-ui.css">
  </head>
  <body>
  	<!-- !Primary nav bar -->
    <nav class="navbar navbar-static-top navbar-default margin-0 col-xs-12 padding-0" role="navigation">
    	<div class="container-fluid">
	    	<!-- Brand and toggle get grouped for better mobile display -->
	    	<div class="navbar-header">
		      <button type="button" class="navbar-toggle mright-0" data-toggle="collapse" data-target="#menu">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <img src="//developers.sanmina.com/v4/img/dummy-logo.png" class="pull-left mtop-10" id="logo">
		      <a class="navbar-brand uppercase text-normal-size" href="#">
		      	<span>Here the name of the application</span>
		      </a>
		    </div>
		    <!-- User -->
	    	<div class="pull-right mtop-10 hidden-xs">
	    		<a href="" class="btn btn-default btn-circle pull-right mleft-15 mtop-5">
	    			<span class="glyphicon glyphicon-off"></span>
	    		</a>
	    		<small class="text-bold text-gray pull-right uppercase mtop-15 mleft-10 hidden-sm hidden-xs">User Name Here</small>
		    	<div class="pull-right mleft-20 hidden-md hidden-sm hidden-xs">
			    	<img src="//developers.sanmina.com/v4/img/user-avatar.png" alt="User profile picture" class="img-circle" style="height: 40px; width:40px">
		    	</div>
	    	</div>
	    	<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse pull-right" id="menu">
		      <ul class="nav navbar-nav">
		        <li class="active">
		        	<a href="#" class="uppercase text-medium">
		        		Nav 1
		        	</a>
		        </li>
		        <li>
		        	<a href="#" class="uppercase text-medium">
		        		Nav 2
		        	</a>
		        </li>
		        <li>
		        	<a href="#" class="uppercase text-medium">
		        		Nav 3
		        	</a>
		        </li>
		        <li>
		        	<a href="#" class="uppercase text-medium">
		        		Nav 4
		        	</a>
		        </li>
		        <li>
		        	<a href="#" class="uppercase text-medium">
		        		Nav 5
		        	</a>
		        </li>
		        <li class="visible-xs">
		        	<a href="#" class="uppercase text-medium">
		        		Logout
		        	</a>
		        </li>
		      </ul>
		    </div>
    	</div>
    </nav>
    <!-- !Secondary nav bar -->
    <nav class="navbar navbar-static-top shrink navbar-inverse mtop-0 col-xs-12 padding-0" id="navigation-b">
    	<div class="container-fluid">
		      <div class="row">
			      <div class="col-xs-12 padding-0">
				      <div class="col-sm-6 col-xs-2">
					      <div class="row">
					      		<a href="#" class="btn navbar-btn-lg btn-gray-dark pull-left">
					      			<span class="ion-arrow-left-c text-bigger"></span>
					      		</a>
					      		<!-- hidden on smartphones -->
					      		<p class="pull-left h4 uppercase navbar-text hidden-xs" id="form-name">Here the name of the form</p>
					      </div>
				      </div>
				      <div class="col-sm-4 col-sm-offset-2 col-xs-10 pull-right">
			      		<div class="row">
			      			<div class="col-xs-6">
			      				<button type="button" class="btn btn-default btn-lg btn-block navbar-btn uppercase text-bold btn-loading" >
					      			<span class="content visible-lg"><span class="ion-document"></span> Save as draft</span>
					      			<!-- Visible on medium size screens and tablets -->
					      			<span class="content hidden-lg"><span class="ion-document"></span> Save</span>
					      		</button>
			      			</div>
			      			<div class="col-xs-6">
			      				<button type="button" id="btn-submit" class="btn btn-success btn-lg btn-block navbar-btn uppercase text-bold btn-loading">
					      			<span class="content visible-lg"><span class="ion-checkmark-round"></span> Submit data</span>
					      			<!-- Visible on medium size screens and tablets -->
					      			<span class="content hidden-lg"><span class="ion-checkmark-round"></span> Submit</span>
					      		</button>
			      			</div>
			      		</div>
			      	</div>
			      	
			      </div>
		      </div>
    	</div>
  	</nav>
    <!-- !Content -->
    <section class="container-fluid mbottom-10" id="main-content">
		<div class="row">
			<!-- visible only on smartphones -->
			<p class="h4 uppercase text-gray-darker visible-xs col-xs-12 mbottom-20">Here the name of the form</p>
			<div class="col-lg-8 col-lg-offset-2 clearfix">
				<div class="panel panel-default mbottom-10" id="form-chunk">
					<div class="panel-heading uppercase text-bold clearfix">
						<p class="mbottom-0 pull-left">First part of the form</p>
					</div>
					<div class="panel-body">
						<section class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label><small>Label</small></label>
									<div class="input-group">
										<p class="form-control-static">
											<a href="#">Some value with hyperlink</a>
										</p>
									</div>						  
								</div>
								<div class="form-group mtop-10">
									<label><small>Label</small></label>
									<div class="input-group">
										<p class="form-control-static">
											Some static value
										</p>
									</div>						  
								</div>
								<div class="form-group">
							    	<label><small>Label</small></label>
									<div class="input-group mandatory">
										<input type="text" id="date-needed" class="form-control input-sm" placeholder="mm/dd/yyyy">
										<span class="input-group-btn">
											<button id="date-needed-btn" class="btn btn-info btn-sm" type="button" data-toggle="modal" data-target="#requestor-modal">
												<span class="glyphicon glyphicon-calendar"></span>
											</button>
										</span>
									</div>						  
								</div>
								<div class="form-group mandatory clearfix">
								    <label for="exampleInputEmail1"><small>Label</small></label>
								    <div id="select-plant" class="select select-small span2 pull-left btn-block">
										<select>
											<option>MXN</option>
											<option>USD</option>
											<option>MYR</option>
											<option>NZD</option>
											<option>THB</option>
										</select>
									</div>
								</div>
								<div class="form-group clearfix">
								    <label for="exampleInputEmail1"><small>Label</small></label>
								    <div class="select select-small span2 pull-left btn-block">
										<select>
											<option>MXN</option>
											<option>USD</option>
											<option>MYR</option>
											<option>NZD</option>
											<option>THB</option>
										</select>
									</div>
								</div>
								<div class="form-group clearfix">
									<label for="exampleInputEmail1" class="col-xs-12">
										<div class="row">
											<small class="col-md-2 col-xs-4 padding-0 mtop-10">Label</small>
											<div class="onoffswitch onoffswitch-info mtop-5">
											    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="switch-b" checked="">
											    <label class="onoffswitch-ctrl" for="switch-b">
											        <div class="onoffswitch-inner"></div>
											        <div class="onoffswitch-switch"></div>
											    </label>
											</div>
										</div>
									</label>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group mandatory">
								<label for="exampleInputEmail1"><small>Label</small></label>
								<input type="tel" class="form-control input-sm" placeholder="" id="mandatory">
							</div>
								<div class="form-group">
								<label for="exampleInputEmail1"><small>Label</small></label>
								<input type="tel" class="form-control input-sm" placeholder="">
							</div>
								<div class="form-group">
								<label for="exampleInputEmail1"><small>Label</small></label>
								<input type="text" class="form-control input-sm" placeholder="">
							</div>
								<div class="form-group">
								<label for="exampleInputEmail1"><small>Label</small></label>
								<textarea class="form-control" rows="5"></textarea>
							</div>
							</div>
  						</section>
					</div>
				</div>
				<div class="panel panel-default mbottom-10">
					<div class="panel-heading uppercase text-bold clearfix">
						<p class="mbottom-0 pull-left">Second part of the form</p>
					</div>
					<div class="panel-body">
						<section class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label for="exampleInputEmail1"><small>Label</small></label>
									<input type="tel" class="form-control input-sm" placeholder="">
								</div>
								<div class="form-group">
									<label for="exampleInputEmail1"><small>Label</small></label>
									<input type="tel" class="form-control input-sm" placeholder="">
								</div>
								<div class="form-group">
									<label for="exampleInputEmail1"><small>Label</small></label>
									<input type="tel" class="form-control input-sm" placeholder="">
								</div>
								<div class="form-group">
									<label for="exampleInputEmail1"><small>Label</small></label>
									<input type="tel" class="form-control input-sm" placeholder="">
								</div>
								<div class="form-group">
									<label for="exampleInputEmail1"><small>Label</small></label>
									<input type="tel" class="form-control input-sm" placeholder="">
								</div>
								<div class="row">
									<div class="form-group col-sm-4">
	    								<div class="checkbox checkbox-sm">
									    	<input type="checkbox" id="c1" checked="">
									    	<label for="c1">
									    		<span class="check"></span>
									    		<span class="checkbox-label">Label</span>
									    	</label>
									    </div>
	    							</div>
	    							<div class="form-group col-sm-4">
	    								<div class="checkbox checkbox-sm">
									    	<input type="checkbox" id="c2" checked="">
									    	<label for="c2">
									    		<span class="check"></span>
									    		<span class="checkbox-label">Label</span>
									    	</label>
									    </div>
	    							</div>
	    							<div class="form-group col-sm-4">
	    								<div class="checkbox checkbox-sm">
									    	<input type="checkbox" id="c3" checked="">
									    	<label for="c3">
									    		<span class="check"></span>
									    		<span class="checkbox-label">Label</span>
									    	</label>
									    </div>
	    							</div>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label for="exampleInputEmail1"><small>Label</small></label>
									<input type="tel" class="form-control input-sm" placeholder="">
								</div>
									<div class="form-group">
									<label for="exampleInputEmail1"><small>Label</small></label>
									<input type="tel" class="form-control input-sm" placeholder="">
								</div>
									<div class="form-group">
									<label for="exampleInputEmail1"><small>Label</small></label>
									<input type="text" class="form-control input-sm" placeholder="">
								</div>
									<div class="form-group">
									<label for="exampleInputEmail1"><small>Label</small></label>
									<textarea class="form-control" rows="5"></textarea>
								</div>
							</div>
  						</section>
					</div>
				</div>
				<div class="panel panel-default mbottom-10">
					<div class="panel-heading uppercase text-bold clearfix">
						<p class="mbottom-0 pull-left">Third part of the form</p>
					</div>
					<div class="panel-body">
						<section class="row">
							<div class="col-sm-6">
								<div class="col">
									<div class="form-group col-sm-6">
						 				<div class="radio">
									    	<input type="radio" name="r1" id="r1" value="optionr1" checked="">
									    	<label for="r1">
									    		<span class="rad"></span>
									    		<span class="radio-label">Label</span>
									    	</label>
									    </div>
	    							</div>
	    							<div class="form-group col-sm-6">
						 				<div class="radio">
									    	<input type="radio" name="r1" id="r2" value="optionr2">
									    	<label for="r2">
									    		<span class="rad"></span>
									    		<span class="radio-label">Label</span>
									    	</label>
									    </div>
	    							</div>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="well well-info">
									<b>Here some important information.</b>
								</div>
							</div>
  						</section>
					</div>
				</div>
			</div>
		</div>
    </section>
    <!-- !Footer -->
    <footer class="col-lg-8 col-lg-offset-2" id="footer">
    	<div class="container-fluid">
		      <div class="row">
			      <div class="col-xs-12">
				      <div class="badge badge-danger uppercase mtop-20">Here some legend of authoring or copyrights</div>
				      <img src="https://developers.sanmina.com/v4/img/logos/sanmina-100x56.png" width="80" alt="Sanmina" class="pull-right mtop-5 mbottom-25">
			      </div>
		      </div>
    	</div>
  	</footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap.min.js"></script>
    <!-- jQuery UI -->
    <script src="jquery-ui.js"></script>
    <!-- Points of interest -->
    <script src="sanm-points-of-interest.js"></script>
    <script>
	    PointsOfInterest.settings = [
				{
					id: "logo", 
					messagePosition: "bottom", 
					message: 'Substitute this placeholder image for the logo of your application.'
				},
				{
					id: "form-name", 
					messagePosition: "bottom", 
					message: 'If the form is too long consider maintaining this bar on fixed position while the user scrolls down the page. This bar contains the most important actions in the form.'
				},
				{
					id: "form-chunk", 
					messagePosition: "bottom", 
					message: 'Place elements in a logical ordering and group fields that together describe an entity, e.g. name and address could form "personal information".'
				},
				{
					id: "date-needed", 
					messagePosition: "top", 
					message: 'Display a calendar when clicking a datepicker textfield or calendar button. Give a hint using the placeholder attribute of the tag and showing the format of the date in case the user wants to introduce it manually. '
				},
				{
					id: "btn-submit", 
					messagePosition: "left", 
					message: 'Not all the buttons can have the same visual hierarchy, choose the more important and assign more constrast to it. '
				},
				{
					id: "mandatory", 
					messagePosition: "top", 
					message: 'Make a distinction between mandatory and optional fields.'
				},
				{
					id: "footer", 
					messagePosition: "top", 
					message: 'Copyright and authoring legends along with the Sanmina logo should be at the bottom of the page (For internal-use apps the user already knows he is navigating within the company network).'
				}
			]
			
    	$(window).load(function() {
    		/* !Set secondary navigartion top fixed */
			$('#navigation-b').affix({
				offset: {
					top: 63,
				},
			})
			$('#navigation-b').on('affix.bs.affix', function () {
				$(this).css("top", "0px");
				$('#main-content').css("margin-top", "80px");
			});
			$('#navigation-b').on('affixed-top.bs.affix', function () {
				$('#main-content').css("margin-top", "0px");
			});
			
			$("#date-needed").datepicker();
			$("#date-needed-btn").click(function(){
				$("#date-needed").datepicker("show");
			})
			
			/* !Loading buttons */
			$('#btn-submit').click(function(e){
				e.preventDefault();
				$(this).addClass('state-loading');
				$("#main-content").toggleClass("block-content");
				$('#navigation-b').addClass("important");
				var scope = $(this);
				setTimeout(function(){
					scope.removeClass('state-loading');
					scope.addClass('state-success');
					$("#main-content").toggleClass("block-content");
					setTimeout(function(){
						scope.removeClass('state-success');
						$('#navigation-b').removeClass("important");
					}, 1000);
				}, 3000);
			});
			
			
			PointsOfInterest.init();
    	});
    </script>
  </body>
</html>